<script language='javascript'>
    var labelType, useGradients, nativeTextSupport, animate;
    var st;
    var json;
    var isAjax = true;
    
    (function() {
        var ua = navigator.userAgent,
        iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
        typeOfCanvas = typeof HTMLCanvasElement,
        nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
        textSupport = nativeCanvasSupport 
            && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
        labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
        nativeTextSupport = labelType == 'Native';
        useGradients = nativeCanvasSupport;
        animate = !(iStuff || !nativeCanvasSupport);
    })();
    
    var Log = {
        elem: false,
        write: function(text){
            if (!this.elem) 
                this.elem = document.getElementById('log');
            this.elem.innerHTML = text;
            this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
        }
    };
        function initLoad(){
            Rocket.Request({
                url: BASE_URL+'reportes/loadUsersTree',
                data:{first:true},
                success:function(data) {
                    json = data;
                    init();
                }
            });
        }
        function loadData(id){
            Rocket.Request({
                url: BASE_URL+'reportes/loadUsersTre',
                data:{id:id, first:false},
                success:function(data) {
                    return data;
                }
            });
        }
        function cambiaPosicion(){
            isAjax = false;			
            st.switchPosition("top", "animate", {  
                onComplete: function() {  
                    st.onClick(st.root);
                    isAjax = true;
                }  
            });	
        }
        function init(){
            $jit.ST.Plot.NodeTypes.implement({
                'nodeline': {
                    'render': function(node, canvas, animating) {
                        if(animating === 'expand' || animating === 'contract') {
                            var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
                            var width  = nconfig.width, height = nconfig.height;
                            var algnPos = this.getAlignedPos(pos, width, height);
                            var ctx = canvas.getCtx(), ort = this.config.orientation;
                            ctx.beginPath();
                            if(ort == 'left' || ort == 'right') {
                                ctx.moveTo(algnPos.x, algnPos.y + height / 2);
                                ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
                            } else {
                                ctx.moveTo(algnPos.x + width / 2, algnPos.y);
                                ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
                            }
                            ctx.stroke();
                        } 
                    }
                }
          
            });
            st = new $jit.ST({
                'injectInto':'tree',
                duration: 500,
                width:1200,
                height:500,		
                transition: $jit.Trans.Quart.easeInOut,
                levelDistance: 100,
                levelsToShow: 4,
                Node: {
                    height: 40,
                    width: 80,
                    type: 'nodeline',
                    color:'#23A4FF',
                    lineWidth: 0.5,
                    align:"left",
                    overridable: true
                },
                Edge: {
                    type: 'bezier',
                    lineWidth: 2,
                    color:'#23A4FF',
                    overridable: true
                },
                Navigation: {  
                    enable:true,  
                    panning:true  
                },
                Tips: { 
                    enable: true, 
                    onShow: function(tip, node) { 
                        
                     //   console.debug(node)
                        
                        $(tip).css("width","300px");
                        var data = node.data;
                        var img = "";
                        var nombre="";
                        var f1="No Posee";
                        var f2="No Posee";
                        var direccion="Sin dirección";
                        var email="No Posee";
                        var html="";
			var imageJuanelo = BASE_PATH+'images/juanelo.png';
                        if(data.nombre){
                            if(data.avatar !== null)
                                img = "<img src='"+data.avatar+"'/>";
                            else img ="<img src='"+imageJuanelo+"'/>";	
                        }
                        else{
                            data = json.children[0].data;
                            if(data.avatar !== null)
                                img = "<img src='"+data.avatar+"'/>";
                            else img ="<img src='"+imageJuanelo+"'/>";	
                        }    
				
					
                        if(data.fono_fijo!==null) f1 = data.fono_fijo;
                        if(data.fono_movil!==null) f2 = data.fono_movil;
                        if(data.email!==null) email = data.email;
                        if(data.direccion!==null) direccion = data.direccion;
				
                        html = '<div class="box_shadow tooltip top-left-rounded-corner top-right-rounded-corner bottom-left-rounded-corner bottom-right-rounded-corner">'+img+
                            '<ul><li><h3 class="titulo_nice">'+data.nombre+'</h3></li>'+
                            '<li><strong>Email:</strong><label>'+email+'</label></li>'+
                            '<li><strong>Fono fijo:</strong><label>'+f1+'</label></li>'+
                            '<li><strong>Fono móvil:</strong><label>'+f2+'</label></li>'+
                            '<li><strong>Dirección:</strong><label>'+direccion+'</label></li>'+
                            '<li><strong>ID:</strong><label>'+data.id+'</label></li>'+
                            '</ul>'+
                            '</div>';
                        tip.innerHTML = html;
                    } 
                }, 
                request: function(nodeId, level, onComplete) {
                    if(isAjax){
                        Rocket.Request({
                            url: BASE_URL+'reportes/loadUsersTree',
                            data:{id:nodeId},
                            success:function(data) {
                                onComplete.onComplete(nodeId, data);  
                            }
                        });
                    }
                    else{
                        onComplete.onComplete(st.root, $.parseJSON(json));  
                    }
                },
                onBeforeCompute: function(node){
                    Log.write("loading " + node.name);
                },
                onAfterCompute: function(){
                    Log.write("done");
                },
                onCreateLabel: function(label, node){
                    label.id = node.id;            
                    label.innerHTML = node.name;
                    label.onclick = function(){
                        st.onClick(node.id);
                    };
                    var style = label.style;
                    style.width = 90 + 'px';
                    style.height = 20 + 'px';            
                    style.cursor = 'pointer';
                    style.color = '#fff';
                    style.fontSize = '0.8em';
                    style.textAlign= 'left';
                    style.textDecoration = 'none';
                    style.paddingTop = '0px';
                },
                onBeforePlotNode: function(node){
                    if (node.selected) {
                        node.data.$color = "#ff7";
                    }
                    else {
                        delete node.data.$color;
                    }
                },
                onBeforePlotLine: function(adj){
                    if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                        adj.data.$color = "#eed";
                        adj.data.$lineWidth = 5;
                    }
                    else {
                        delete adj.data.$color;
                        delete adj.data.$lineWidth;
                    }
                }
            });
            st.loadJSON(json);
            st.compute();
            st.onClick(st.root, {  
                Move: {  
                    enable: true,  
                    offsetX: 100,  
                    offsetY: 100  
                },  
                onComplete: function() {  
                    //			cambiaPosicion();  
                }  
            }); 
        }
    
    $(document).ready(function() {
        initLoad();
    }); 
</script>
<style type="text/css">
    #ul_page li{
        background-color: black;
        float:left;
        width:100%;
    }
    #tree{
        background-color: black;
        float:left;
        width:100%;
    }
    .titulo_nice{
        color:white;
    }
    .tooltip{
        border:1px solid white;
        width:380px;
        height:150px;
        padding:4%;
        background-color: #524F50;
        color:white;
    }
    .tooltip img{
        float:left;
        width:40%;
        height:140px;
        margin-right: 3%;
        border:4px #fff solid;
    }
    .tooltip ul{
        float:left;
        width:48%;
    }
    .title{
        color:white;
        float:left;
        width:100%;
        background-color: black;
    }
    .title span{
        margin:2% 0 0 2%;
        font-size:2em;
        float:left;
    }
</style>

<ul class='ul_page'>
    <li>
        <div class="title"><span>Árbol de Genealogías</span></div>
        <div id="tree"></div>
        <div style="display:none;" id="log"></div>
    </li>
</ul>

